<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="div">
        <a href="#" v-for="num in 6" style="margin-left: 10px;" @click.prevent="page=num">{{num}}</a>
        <ul>
            <li v-for="item in arr">{{item.name}}</li>
        </ul>
        <button @click="onAdd">点击</button>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script>
    <script src="./mock.js"></script>
    <script src="./mock-ajax.js"></script>

    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    page: 1,
                    arr: [],
                    arr1:{
                        name:''
                    }
                }
            },

            methods: {
                onAdd(){
                    this.arr1.name = 'cp';
                }
            },

            //侦听器:看状态变不变，一旦有变化就记录
            watch: {
               
                /* async page(val) {
                    // var res = await axios.get('http://www.zdtech.top:3000/v1/solars',{page:this.page});
                    var res = await axios.get('/user', { page: this.page });
                    console.log(res.data);
                    this.arr = res.data;
                    console.log(this.arr);
                } */
                page:{
                    immediate:true,  //侦听器一创建就立即执行
                    async handler(val){
                        var res = await axios.get('/user', { page: val });
                        this.arr = res.data;
                    },
                },
                arr:{
                    handler(){
                        console.log('arr改变了')
                    }
                },
                arr1:{
                    handler(val,oval){
                        console.log('arr1改变了');
                        console.log('新',val);
                        console.log('旧',oval);
                    },
                    //深层监听，通常监听数据结构
                    deep:true
                }

            },
           /*  async created() {
                var res = await axios.get('/user', { page: this.page });
                this.arr = res.data;
            } */
        }).mount('#div');
    </script>

</body>

</html>